<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式重置表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 移入公共样式表 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入插件样式 -->
    <link rel="stylesheet" href="./css/slider.css">
    <!-- 引入当前样式表 -->
    <link rel="stylesheet" href="./css/Productlist.css">
</head>
<body>
    <!-- 1、头部开始 -->
    <div id="header">
        <!-- 顶部 -->
        <div class="top bgc10 ce6">
            <!-- 版心 -->
            <div class="container ti210">
                <!-- 左边 -->
                legochina.cn
                <!-- 右边 -->
                <div class="fr">
                    欢迎光临<span class="cf60">乐购</span>，请<a href="./regsiter.html">登录</a>\<a href="#" class="cf60">注册</a>
                </div>
            </div>
        </div>
        <!-- 菜单 -->
        <div class="container rel">
            <!-- logo -->
            <a href="./index.html"><img src="./imgs/logo.jpg" alt="" class="abs logo"></a>
            <!-- 搜索和购物车 -->
            <div class="clearfix" id="searchBox">
                <div class="shopCar fr tcenter fs16 mt5">
                    <a href="./ShoppingCart.html" class="shopTxt fs14">购物车<span>0</span></a>
                    <a href="#">我的订单</a>
                </div>
                <!-- 搜索框 -->
                <form action="#" class="search fr clearfix mt5">
                    <input type="text" class="txt fl" placeholder="创意文具">
                    <input type="button" value="" class="btn fl">
                </form>
            </div>
            <!-- 主导航 -->
            <ul id="Navigation" class="clearfix">
                <li><a href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">户外运动</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>
        </div>
    </div>


    <!-- 头部 -->
    <div id="topText" class="container clearfix">
        <!-- 左边 轮播图-->
        <div class="RotationTop fl" id="topImg">
             <!--轮播开始-->
             <div class="pptbox" id="RotationTop">
                <!--轮播的内容-->
                <ul class="innerwrapper">
                    <li>
                        <a href="#"><img src="./imgs/banner1.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="./imgs/banner2.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="./imgs/banner3.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="./imgs/banner4.jpg" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="./imgs/banner5.jpg" /></a>
                    </li>
                </ul>
                <!--数字控制器-->
                <ul class="controls">
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <!--按钮控制器-->
                <span class="btnleft"></span>
                <span class="btnright"></span>
            </div>
        </div>

        <!-- 右边 手风琴-->
        <div class="accordionTop fr">
            <!-- 标题 -->
            <h2 class="fs18 fnormal">热卖畅销</h2>
            <!-- 列表 -->
            <ul class="c39 fs14">
                <script>
                    for (let i = 1; i <= 7; i++) {
                        document.write(`
                        <li>
                        <span class="dib bsbb">${i}</span>
                        <h4>《从你的世界路过》</h4>
                        <div class="clearfix">
                            <img src="./imgs/santi.jpg" alt="" class="fl">
                            <p class="fr bsbb">《三体》刘慈欣一场科幻的史诗风暴</p>
                        </div>
                    </li>
                    `)

                    }
                </script>
            </ul>
        </div>
    </div>
    <!-- 广告 -->
    <div id="advertisement" class="container">
        <a href="#"><img src="./imgs/advertisement.jpg" alt=""></a>
    </div>
    <!-- 乐购·图书折扣区 -->
    <div id="TescoBooks" class="container">
        <!-- 标题 -->
        <div class="TescoBooksBox">
            <p class="titleText dib fs24">乐购·图书折扣区</p>
        </div>
        <!-- 内容 -->
        <div class="TescoBooksText">
            <ul>
                <script>
                    for (let i = 0; i < 10; i++) {
                        document.write(`
                        <li class="fl mg15">
                    <div>
                        <img src="./imgs/22935553-1_l.jpg" alt="">
                    </div>
                    <a href="#"><img src="/imgs/limitTime.jpg" alt=""></a>
                    <p class="fs14 ti10">白夜行&emsp;东野上吾</p>
                    <div class="ti10"><span class="fs14 cf60">推荐：</span></div>
                    <p class="fs24 cc0"><span class="cf60">￥:38&emsp;</span><del>￥:58</del></p>
                </li>
                        `)
                    }
                </script>
            </ul>
        </div>
    </div>

    <!-- 新书上架 -->
    <div id="newBook" class="container clearfix mt40">
        <!-- 标题 -->
        <div class="TescoBooksBox">
            <p class="titleText dib fs22"><span class="cfff dib fs28">新</span>书上架</p>
        </div>
        <div class="TescoBookTextBox clearfix rel"> 
                    <!-- 左边 -->
            <div class="newBookText fl">
                <ul>
                    <script>
                        for (let i = 0; i < 10; i++) {
                            document.write(`
                            <li class="fl mg104">
                        <div><img src="./imgs/22928335-1_l.jpg" alt=""></div>
                        <p class="ti10 lh10">查理&emsp;斯密斯</p>
                        <p class="c80 ti10">中国邮电出版社</p>
                        <p class="fs18 cf60 ti10">￥:49&emsp;<del class="cccc">￥:79</del></p>
                    </li>
                            `)
                        }
                    </script>
                </ul>
            </div>
            <!-- 右边手风琴 -->
            <div class="newBookright fr abs">
                <div class="rightText fr">
                    <!-- 标题 -->
                    <h2 class="fs24 c80 fnormal tcenter">主编推荐</h2>
                    <!-- 列表 -->
                    <ul class="c39 fs16">
                        <script>
                            for (let i = 1; i <= 7; i++) {
                                document.write(`
                                <li>
                                <span>${i}</span>
                                <h4>就喜欢你看不惯我  又干不</h4>
                                <div class="clearfix shoufengqi">
                                    <img src="./imgs/index08_05.jpg" alt="" class="fl">
                                    <p class="fr fs14">从你的世界路过
                                            入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</p>
                                </div>
                            </li>
                            `)
        
                            }
                        </script>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 独家提供 -->
    <div id="Exclusive" class="container mt40">
        <!-- 标题 -->
        <div class="title clearfix mt20">
         <h2 class="fs24 c3 fnormal fl">
             <span>独</span>
             家提供</h2>
         <ul class="fr tcenter fs18 c3">
             <li class="active">货币金融</li>
             <li>货币金融</li>
             <li>社会文学</li>
             <li>科学技术</li>
             <li>儿童文学</li>
             <li>教学参辅</li>
             <li>生活</li>
             <li>小说</li>
         </ul>
     </div>
        <!-- 内容轮播 -->
        <!-- 轮播图 -->
        <!--轮播开始-->
				<div class="pptbox bannerInner">
					<!--轮播的内容-->
					<ul class="innerwrapper">
						<li>
							<!-- 内容 -->
                            <div class="listBox mauto clearfix">
                                <script>
                                     for (let i = 0; i < 12; i++) {
                                         document.write(`
                                         <div class="items fl">
                                      <div class="tcenter">
                                     <img src="./imgs/21090357-1_l.jpg" alt="">
                                     </div>
                                     <h4 class="ti10 lh10">查理 斯密斯</h4>
                                     <p class="ti10 c80">中国邮电出版社</p>
                                     <div class="ti10 cf60 fs18">
                                         &yen;:49&emsp;
                                         <del class="cccc">&yen;:79</del>
                                     </div>
                                 </div>
                                         `)
                                     }
                                 </script>
                            </div>
						</li>
						<li>
							<!-- 内容 -->
                            <div class="listBox mauto clearfix">
                                <script>
                                     for (let i = 0; i < 12; i++) {
                                         document.write(`
                                         <div class="items fl">
                                      <div class="tcenter">
                                     <img src="./imgs/21090357-1_l.jpg" alt="">
                                     </div>
                                     <h4 class="ti10 lh10">查理 斯密斯</h4>
                                     <p class="ti10 c80">中国邮电出版社</p>
                                     <div class="ti10 cf60 fs18">
                                         &yen;:49&emsp;
                                         <del class="cccc">&yen;:79</del>
                                     </div>
                                 </div>
                                         `)
                                     }
                                 </script>
                            </div>
						</li>
						<li>
							<!-- 内容 -->
                            <div class="listBox mauto clearfix">
                                <script>
                                     for (let i = 0; i < 12; i++) {
                                         document.write(`
                                         <div class="items fl">
                                      <div class="tcenter">
                                     <img src="./imgs/21090357-1_l.jpg" alt="">
                                     </div>
                                     <h4 class="ti10 lh10">查理 斯密斯</h4>
                                     <p class="ti10 c80">中国邮电出版社</p>
                                     <div class="ti10 cf60 fs18">
                                         &yen;:49&emsp;
                                         <del class="cccc">&yen;:79</del>
                                     </div>
                                 </div>
                                         `)
                                     }
                                 </script>
                            </div>
						</li>
						<li>
							<!-- 内容 -->
                            <div class="listBox mauto clearfix">
                                <script>
                                     for (let i = 0; i < 12; i++) {
                                         document.write(`
                                         <div class="items fl">
                                      <div class="tcenter">
                                     <img src="./imgs/21090357-1_l.jpg" alt="">
                                     </div>
                                     <h4 class="ti10 lh10">查理 斯密斯</h4>
                                     <p class="ti10 c80">中国邮电出版社</p>
                                     <div class="ti10 cf60 fs18">
                                         &yen;:49&emsp;
                                         <del class="cccc">&yen;:79</del>
                                     </div>
                                 </div>
                                         `)
                                     }
                                 </script>
                            </div>
						</li>
						<li>
							<!-- 内容 -->
                            <div class="listBox mauto clearfix">
                                <script>
                                     for (let i = 0; i < 12; i++) {
                                         document.write(`
                                         <div class="items fl">
                                      <div class="tcenter">
                                     <img src="./imgs/21090357-1_l.jpg" alt="">
                                     </div>
                                     <h4 class="ti10 lh10">查理 斯密斯</h4>
                                     <p class="ti10 c80">中国邮电出版社</p>
                                     <div class="ti10 cf60 fs18">
                                         &yen;:49&emsp;
                                         <del class="cccc">&yen;:79</del>
                                     </div>
                                 </div>
                                         `)
                                     }
                                 </script>
                            </div>
						</li>
                        <li>
							<!-- 内容 -->
                            <div class="listBox mauto clearfix">
                                <script>
                                     for (let i = 0; i < 12; i++) {
                                         document.write(`
                                         <div class="items fl">
                                      <div class="tcenter">
                                     <img src="./imgs/21090357-1_l.jpg" alt="">
                                     </div>
                                     <h4 class="ti10 lh10">查理 斯密斯</h4>
                                     <p class="ti10 c80">中国邮电出版社</p>
                                     <div class="ti10 cf60 fs18">
                                         &yen;:49&emsp;
                                         <del class="cccc">&yen;:79</del>
                                     </div>
                                 </div>
                                         `)
                                     }
                                 </script>
                            </div>
						</li>
                        <li>
							<!-- 内容 -->
                            <div class="listBox mauto clearfix">
                                <script>
                                     for (let i = 0; i < 12; i++) {
                                         document.write(`
                                         <div class="items fl">
                                      <div class="tcenter">
                                     <img src="./imgs/21090357-1_l.jpg" alt="">
                                     </div>
                                     <h4 class="ti10 lh10">查理 斯密斯</h4>
                                     <p class="ti10 c80">中国邮电出版社</p>
                                     <div class="ti10 cf60 fs18">
                                         &yen;:49&emsp;
                                         <del class="cccc">&yen;:79</del>
                                     </div>
                                 </div>
                                         `)
                                     }
                                 </script>
                            </div>
						</li>
                        <li>
							<!-- 内容 -->
                            <div class="listBox mauto clearfix">
                                <script>
                                     for (let i = 0; i < 12; i++) {
                                         document.write(`
                                         <div class="items fl">
                                      <div class="tcenter">
                                     <img src="./imgs/21090357-1_l.jpg" alt="">
                                     </div>
                                     <h4 class="ti10 lh10">查理 斯密斯</h4>
                                     <p class="ti10 c80">中国邮电出版社</p>
                                     <div class="ti10 cf60 fs18">
                                         &yen;:49&emsp;
                                         <del class="cccc">&yen;:79</del>
                                     </div>
                                 </div>
                                         `)
                                     }
                                 </script>
                            </div>
						</li>
					</ul>
					<!--数字控制器-->
					<ul class="controls">
						<li class="current">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
					</ul>
					<!--按钮控制器-->
					<span class="btnleft"></span>
					<span class="btnright"></span>
				</div>
        
    </div>


    <!-- 猜你喜欢 -->
    <div id="enjoy" class="container mt40 ">
        <!-- 标题 -->
        <div class="title clearfix mt20">
         <h2 class="fs24 c3 fnormal fl">
             <span>猜</span>
             你喜欢</h2>
             <p class="fr cur" id="btn">换一批</p>
         </div>
        <!-- 内容 -->
        <div class="enjoyBox mauto">
            <!-- 内容 -->
            <div class="contentList">
                <script>
                    //第一层循环
                    for (let i = 0; i < 6; i++) {
                        document.write(`<div class="listBox mauto clearfix">`);

                        //第二层循环
                        for (let j = 0; j < 12; j++) {
                            document.write(`
                                            <div class="items fl">
                                    <div class="tcenter">
                                    <img src="./imgs/22790777-1_l_1.jpg" alt="">
                                    </div>
                                    <h4 class="ti10 lh10">查理 斯密斯</h4>
                                    <p class="ti10 c80">中国邮电出版社</p>
                                    <div class="ti10 cf60 fs18">
                                        &yen;:49&emsp;
                                        <del class="cccc">&yen;:79</del>
                                    </div>
                                </div>
                                                `)

                        }

                        document.write(`</div>`)

                    }
                </script>




                <!-- <script>
                     for (let i = 0; i < 12; i++) {
                         document.write(`
                         <div class="items fl">
                      <div class="tcenter">
                     <img src="./imgs/22790777-1_l_1.jpg" alt="">
                     </div>
                     <h4 class="ti10 lh10">查理 斯密斯</h4>
                     <p class="ti10 c80">中国邮电出版社</p>
                     <div class="ti10 cf60 fs18">
                         &yen;:49&emsp;
                         <del class="cccc">&yen;:79</del>
                     </div>
                 </div>
                         `)
                     }
                 </script> -->
            </div>
    </div>
    <!-- 分割线 -->
    <div id="enjoyBorder"></div>
    </div>

    <!-- 人文社科精选 -->
    <div id="select" class="container mt20">
        <!-- 内容 -->
        <ul class="clearfix">
            <script>
                for (let i = 0; i < 6; i++) {
                    document.write(`
                    <li class="fl">
                <div class="leftText fl">
                    <p class="fs16 ti10">人文社科精选</p>
                    <p class="fs14 cccc ti10">书好价优</p>
                    <div>满3件折上7折</div>
                </div>
                <div class="rightImg fr">
                    <a href="#"><img src="./imgs/pro-demo.jpg" alt=""></a>
                </div>
            </li>
                    `)
                }
            </script>
        </ul>

    </div>




    <!-- 广告下 -->
    <div id="advertisement2" class="container">
        <a href="#"><img src="./imgs/advertisement.jpg" alt=""></a>
    </div>

        <!-- 下边线 -->
    <div class="xiabianxian"></div>

    <!-- 10.页脚 -->
    <!-- 四个图标 -->
    <div id="footer">
        <div class="footerTop">
            <ul class="container">
                <li><a href="#"><img src="./imgs/222_11.png" alt=""></a></li>
                <li><a href="#"><img src="./imgs/222_13.png" alt=""></a></li>
                <li><a href="#"><img src="./imgs/222_15.png" alt=""></a></li>
                <li><a href="#"><img src="./imgs/222_17.png" alt=""></a></li>
            </ul>
        </div>
    <!-- 页脚列表 -->
        <div class="footerList container">
            <!-- 页脚第一排列表盒子 -->
            <div class="footerListBox">
                <ul class="container">
                    <script>
                        for (let i = 0; i < 5; i++) {
                            document.write(`
                            <li class="footerListText dib fl"><a href="#">购物指南</a></li>
                            `) 
                        }
                    </script>
                </ul>
            </div>
            <!-- 页脚第二排列表盒子 -->
            <div class="footerListBox2">
                <ul class="container Boxtwo">
                    <script>
                        for (let i = 0; i < 19; i++) {
                            document.write(`
                            <li class="footerListText2 dib fl"><a href="#">退换货政策</a></li>
                            `)
                        }
                    </script>
                    <li class="footerLogo">
                        <div>
                            <img src="./imgs/logo_00.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 最后两排 -->
        <div class="footerBottom container">
            <p class="dib mg42 lh32 tcenter">公司简介  |  Investor Relations  |  网站联盟  |  乐购招商  |  机构销售  |  手机乐购  |  官方Blog   |  热词搜索<br>Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
        </div>
    </div>

    <!--轮播结束-->
    <script src="./lib/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <!--插件库-->
            <script src="./lib/slider.js" type="text/javascript" charset="utf-8"></script>
            <script src="./js/Productlist.js"></script>
</body>
</html>